<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="100"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  >
  </el-pagination>
</template>

<script>
export default {
  name: "Pagination",
  props: ["input_data", "output_data"],
  data() {
    return {
      list: [],
      ticket: [],
      //当前数据页的第几页
      currentPage: 1,
      // 总数据条数xx
      total: 0,
      // 每页显示多少行数据,默认为10条
      pagesize: 10,
      // 代表是从后端获取的所有数据
      ticket: [],
      //对话框是否显示
      total: 0,
      open: false,
      form: "",
      title: "",
      single: true,
      multiple: true,
    };
  },
  watch: {
    input_data: {
      handler(newData) {

        this.ticket = newData;
        this.total = newData.length;
        this.getDoctorInfo();
      },
    },
  },
  methods: {
    // 此方法用来获取当前页的数据
    getDoctorInfo() {
      // 清空表格的list 数据
      this.list = [];
      // 获取当前页的数据
      for (
        let i = (this.currentPage - 1) * this.pagesize;
        i < this.total;
        i++
      ) {
        // 将便利的数据添加到 list 里面
        this.list.push(this.ticket[i]);

        // 判断是否达到每一页的要求
        if (this.list.length === this.pagesize) break;
      }
      console.log(this.list + "list");
      this.$emit("update:output_data", this.list);
    },
    // 分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size) {
      // 修改当前每页的数据行数
      this.pagesize = size;
      // 数据重新分页
      this.getDoctorInfo();
    },
    // 调整当前的页码
    handleCurrentChange(pageNumber) {
      // 修改当前的页码
      this.currentPage = pageNumber;
      //数据重新分页
      this.getDoctorInfo();
    },
  },
};
</script>

<style>
</style>
